<template>
    <div class="form-container">
        <el-form :inline="true" :model="searchData" label-width="auto" style="width: auto">
            <el-form-item label="用户名">
                <el-input v-model="searchData.Name" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="部门">
                <el-input v-model="searchData.Department" placeholder="请输入部门" clearable />
            </el-form-item>
            <el-form-item label="用户状态" class="custom-select">
                <el-select v-model="searchData.UserStatus" style="width: 200px;" placeholder="请输入用户状态"
                    class="custom-select">
                    <el-option label="正常" value=true />
                    <el-option label="停用" value=false />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="80">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="Name" label="用户名"> </el-table-column>
            <el-table-column prop="Department" label="部门" />
            <el-table-column prop="Role" label="角色" />
            <el-table-column prop="UserStatus" label="用户状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.UserStatus" style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            " @change="handleStatusChange(scope.row)" class="custom-switch">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="small" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
interface User {
    Name: string;
    Department: string;
    Role: string;
    UserStatus: Boolean;
    date: string;
}
const searchData = reactive({
    Name: '', // 给属性提供初始值，这里是空字符串
    Department: '',
    Role: '',
    UserStatus: '', // 布尔值类型是 boolean，初始值为 false
    date: '',
});
const handleEdit = (index: number, row: User) => {
    console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
    console.log(index, row);
};

const tableData: User[] = [
    {
        Name: "John Doe",
        Department: "IT",
        Role: "Admin",
        UserStatus: true,
        date: "2024-04-08",
    },
    {
        Name: "Jane Smith",
        Department: "HR",
        Role: "Manager",
        UserStatus: false,
        date: "2024-04-07",
    },
    {
        Name: "Alice Johnson",
        Department: "Finance",
        Role: "Accountant",
        UserStatus: true,
        date: "2024-04-06",
    },
];
const onSubmit = () => {
    console.log('submit!')
}
const handleStatusChange = (row: User) => {
    ElMessageBox.alert("This is a message", "Title", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "OK",
        callback: (action: Action) => {
            ElMessage({
                type: "info",
                message: `action: ${action}`,
            });
        },
    });
};
</script>
<style>
.form-container {
    margin-top: 5px;
    /* 设置上边距 */
}
</style>
